<template>
	<view>
		<view class="mask" :class="{'maskShow' : showPicker}" @click="hide('self')" @click.stop.prevent @touchmove.stop.prevent catchtouchmove="true"></view>
		<view class="cpicker-content" :class="{'cpickerShow' : showPicker}" @click.stop.prevent @touchmove.stop.prevent catchtouchmove="true" v-if="showPicker">
			<!-- 优惠券页面，仿mt -->
			<view class="city_content " @click.stop.prevent @touchmove.stop.prevent catchtouchmove="true">
				<text class="iconfont icon-zhixiang-zhishiqishang"></text>
				<view class="panel-scroll-box">
						<view v-for="(tabbarItem,tabbarsIndex) in tabbars" :key="tabbarsIndex"  v-if="tabbars.length>0" :style="{width: width}" class="flex-item">
							<scroll-view :scroll-y="enableScroll" :scroll-top="scrollTop" class="panel-scroll-box">
								<view v-for="(selfItem,selfIndex) in tabbarItem.selfData" :key="selfIndex"  v-if="tabbars.length>0" class="flex-item-view">
									<view class="flex-row-c-c" @click="changCity(tabbarsIndex,selfItem)" >
										<icon type="success_no_circle" v-if="tabbarItem.value==selfItem.value" class="ischeck" size="14" color="#00B1B7" ></icon>
										<text class="city-text">{{selfItem.text}}</text>
									</view>
								</view>
							</scroll-view>
						</view>
				</view>
				<view class="uni-tip-group-button">
					<view class="uni-tip-button cancel_button" @click="cancel">取消</view>
					<view class="uni-tip-button ok_button" @click="ok">确定</view>
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
	
	let windowWidth = 0,scrollTimer = false, tabBar;
	export default {
		name: 'UniCityNvue',
		props: {
			pickerSize: {    // 使用多少个tab
				type: [Number, String],
				default: 1
			},
			provincedata: {      // 默认的省市区id，如果不使用id的情况下则为[]；
				type:Array,
				default:function(){
					return  [];
				},
			}
		},
		data() {
			return {
				tabbars:this.provincedata,
				pickersize: this.pickerSize,
				enableScroll: true,
				showPicker: false,
				width:0,
				scrollTop:0,
			}
		},
		methods: {
			show(){
				this.showPicker = true;
				uni.getSystemInfo({
					success: (res) => {
						this.width = parseInt((res.windowWidth-this.pickerSize) / this.pickerSize)+ 'px'
					},
				})
			},
			cancel(){
				this.showPicker = false;
			},
			changeCityData(index){
				this.changeData(index);
				setTimeout(()=>{
					this.getScroll("show"+index);
				}, 10)
			},
			changCity: function (index,item) {
				if(this.tabbars[index].value!=item.value){
					this.tabbars[index].text=item.text;
					this.tabbars[index].value=item.value;
					if(index<(this.tabbars.length-1)){
						this.tabbars.splice(index+1,this.tabbars.length-index-1)
					}
					if(this.tabbars.length<this.pickersize){
						var current={
								text:"",
								value:"",
								selfData:item.children
							}
						this.tabbars.push(current);
					}
				}
			},
			ok(){
				this.$emit('funcvalue',this.tabbars);
				this.cancel()
			}
		}	
	}
</script>

<style lang="scss">
/* 优惠券面板 */
.mask {
    visibility: hidden;
    position: fixed;
    top: 45px;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: all .3s ease;
}
.maskShow {
    visibility: visible;
    opacity: 1;
}
.cpicker-content {
    position: fixed;
    right: 0;
    top: 58px;
    left: 0;
    background-color: #FFFFFF;
    transition: all .3s ease;
    transform: translateY(100%);
    z-index: 3000;
}
.cpickerShow {
    transform: translateY(0);
}
.flex-item{
	display: inline-block;
	flex: 1;
	border-right: 1px solid #f0f0f0;
	height:100%;
	overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
	/* &:last-child{
		border-right:none;
	} */
}
.flex-item-view{
	overflow:hidden;
}
.current {
    color: #00B1B7;
    border-color: #00B1B7;
    border-bottom-width: 4rpx;
    border-bottom-style: solid;
}
.panel-scroll-box {
    height: 800rpx;
}
.flex-row-c-c {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex-direction: row;
    /* #endif */
    padding-left: 12px;
	overflow:hidden; //超出的文本隐藏
	text-overflow:ellipsis; //溢出用省略号显示
	white-space:nowrap; //溢出不换行
	height: 33px;
}
.city-text {
    /* #ifdef APP-NVUE */
    flex-direction: row;
    /* #endif */
    height: 35px;
    line-height: 35px;
    font-size: 13px;
}
.hide {
    opacity: 0;
}
.ischeck {
    /* #ifndef APP-NVUE */
    display: inline-flex!important;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex-direction: column;
    /* #endif */
    margin-right: 5px;
    vertical-align: middle;
}
.icon-zhixiang-zhishiqishang{
	color: #fff;
	position: absolute;
	top: -23px;
	left: 8%;
	font-size: 35px;
}
.uni-tip-group-button .uni-tip-button{
	width: 50%;
	text-align: center;
	display: inline-block;
	height: 45px;
	line-height: 45px;
	font-size: 13px;
	border-top: 1px solid #f0f0f0;
	&:last-child{
		color: #fff;
		background-color: #F33407;
	}
	&:first-child{
		color: #000;
	}
}
</style>